這篇要來整理之前還沒有講到，但很常見非常實用的Bootstrap 元件：Dropdown（下拉選單） 與 Input Group（輸入框組）。

1. Dropdown（下拉選單）

使用者可以從下拉清單中選擇單一選項的切換元件。它內建了 Popper.js 的定位能力，能確保選單在各種螢幕尺寸或視窗邊界下都不會破版。

基礎結構解析

• 外層：必須包覆 .dropdown
• 內層：
  • 「觸發按鈕」
  • 「dropdown-menu(選單清單)」：

<div class="dropdown">
  <!-- 1. 觸發按鈕：必須加上 data-bs-toggle="dropdown" -->
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <!-- 2. 下拉選單選單項目 -->
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

(參考資料：Bootstrap 5 components-Dropdowns)

2. Input Group（輸入群組）

Input Group 是用來擴充表單 <input> 的視覺工具。它可以輕鬆地在輸入框的左側（Prefix）或右側（Suffix）附加上文字標籤、圖示（Icon）或是按鈕。

基礎結構解析

只要將輸入框與按鈕/文字包在 .input-group 容器內即可：

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

由於變化蠻多元的，建議根據自己的需求查找官方文件 Bootstrap 5 Forms-Input group 適合的範例來使用。

3.實作：整合到TaskTimer

除了昨天剛完成的任務清單頁面之外，計時器的區域也使用了 Dropdown 和Input group，這邊就不另加贅述，直接放上計時器頁面實作的成果。

小結

至此，就完成了三個主要功能的切版，接下來要開始進入到功能實作的環節了。